<template>
	<view class="changeage">
		<view class="top">
			<view class="top_mid" v-if="muban_id">
				<image :src="muban_url" mode="aspectFit" class="imuban"></image>
			</view>
			<view class="top_mid" v-else>
				<video :src="muban_url" mode="aspectFill" class="imuban" autoplay="true" loop="true"
					show-fullscreen-btn="false" enable-progress-gesture="false" show-mute-btn="true"
					play-btn-position="center" :poster="poster" id="myVideo"></video>
			</view>
		</view>
		<view class="bottom">
			<view class="item">
				<text class="t1">选择舞蹈</text>
				<radio-group class="radioGroup" @change="changeStyle" style="margin-right: 20rpx;">
					<label>
						<radio value="ke3" checked="true" class="ro" /><text class="tt">科目三</text>
					</label>
					<label>
						<radio value="tuziwu" class="ro" /><text class="tt">兔子舞</text>
					</label>
					<label>
						<radio value="huajiangwu" class="ro" /><text class="tt">划桨舞</text>
					</label>
				</radio-group>
			</view>
		</view>
		<button class="btn"   @click="startBianLian" :loading="loadding" :disabled="loadding" v-if="muban_id">开始处理</button>
		<button class="btn"  @click="pop_show=true" v-else>选择图片</button>
		<text v-if="price" class="t_price">{{price}}</text>
		<view class="tip">
			<text class="t1">温馨提示</text>
			<text class="t2">
				1、您在使用本服务时，应当遵守相关法律法规的要求以及本平台的相关服务协议，不得将本服务用于非法目的，不得利用本服务从事违法法律法规或侵犯他人合法权益的行为
				您在使用本服务时，应当确保您自身或者您应用的用户使用、上传、发布的照片、素材等信息内容，已取得相关权利人的合法授权，不存在侵犯他人肖像权、版权等合法权益的情形，亦不存在违反相关法律、法规、政策的规定以及公序良俗等情形。
				您自行对您应用中由用户使用本服务产生的内容负责，保证其不违法相关法律、法规、政策的规定以及公序良俗等。
				您违法上述要求引发的任何纠纷由您自行负责，与本平台无关。本平台有权立即停止您在本平台中的一切服务并保留追究您法律责任的权利
			</text>
		</view>
		<imgPop :show="pop_show" @handleClose="pop_show=false" @getUploadImg="onAddImgClick"></imgPop>
	</view>
</template>

<script>
	import imgPop from './cmp/imgPop.vue';
	import {
		getUser,
		getAbilityPrice
	} from '@/src/utils/utils.js';

	import {
		ImageAnimate
	} from '@/src/api/huanlian.js';
	import {
		upload_file
	} from '@/src/utils/uni-fetch.js';
	export default {
		components: {
			imgPop,
		},
		data() {
			return {
				muban_url: "https://iai-frontend-static-1258344699.cos.ap-guangzhou.myqcloud.com/vclm-static/image-dance/console/2%E7%A7%91%E7%9B%AE%E4%B8%89.mp4",
				muban_id: null,
				poster: "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/c84964b6-35d2-4841-a8e8-8a41d55bcdf8.png",
				loadding: false,
				price: null,
				style_id: "ke3",
				show_videos: {
					"ke3": {
						"poster": "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/c84964b6-35d2-4841-a8e8-8a41d55bcdf8.png",
						"video_url": "https://iai-frontend-static-1258344699.cos.ap-guangzhou.myqcloud.com/vclm-static/image-dance/console/2%E7%A7%91%E7%9B%AE%E4%B8%89.mp4",
					},
					"tuziwu": {
						"poster": "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/df796391-5e00-44c6-8a75-68349ac6dc0c.png",
						"video_url": "https://iai-frontend-static-1258344699.cos.ap-guangzhou.myqcloud.com/vclm-static/image-dance/console/1%E5%85%94%E5%AD%90%E8%88%9E.mp4",
					},
					"huajiangwu": {
						"poster": "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/4b05ca6b-4589-46c8-a13d-c03596a46fa5.png",
						"video_url": "https://iai-frontend-static-1258344699.cos.ap-guangzhou.myqcloud.com/vclm-static/image-dance/console/%E5%88%92%E6%A1%A8%E8%88%9E.mp4",
					},
				},
				pop_show:false
			}
		},
		onLoad() {
			this.init_price();
		},
		methods: {
			async init_price() {
				try {
					this.price = await getAbilityPrice('ImageAnimate')
				} catch (e) {
					console.log(e)
				}
			},
			async onAddImgClick() {
				const [error, res] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'] //从相册选择
				});
				if (error) {
					console.error(error, error.errMsg)
					if (error.errCode == -2 || error.errCode == 0) return;
					uni.showModal({
						title: '选取图片失败',
						content: error.errMsg,
						showCancel: false
					});
					return;
				}
				try {
					let result = await upload_file({
						url: '/huanlian/up_image2/',
						file: {
							name: 'image',
							uri: res.tempFilePaths[0]
						},
						formData: {
							img_type: 1
						}
					});
					this.muban_id = result.data.id;
					this.muban_url = res.tempFilePaths[0];
				} catch (e) {
					if (!e) return
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				}
			},
			changeStyle(v) {
				this.style_id = v.detail.value
				if (!this.muban_id) {
					this.muban_url = this.show_videos[this.style_id].video_url
					this.poster = this.show_videos[this.style_id].poster

				}
			},
			async startBianLian() {
				if (!this.muban_id) {
					this.$showToast('请上传图片');
					return;
				}
				try {
					this.loadding = true
					let result = await ImageAnimate({
						template_id: this.muban_id,
						wu_id: this.style_id
					});
					getUser({}, true);
					uni.hideLoading();
					uni.navigateTo({
						url: `/src/pages/My/JobList/JobList`
					});
				} catch (e) {
					if (!e) return
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				} finally {
					this.loadding = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'ImageAnimate.scss';
</style>